<template>
	<view class="navbar-custom">
		<up-navbar :leftIcon="leftIcon" :leftIconColor="leftIconColor" :bgColor="bgColor" :title="title || ' '"
			:titleColor="titleColor" :border-bottom="borderBottom" placeholder title-bold :fixed="fixed"
			:is-back="isBack" @leftClick="goBack" :customStyle="customStyle">
			<template v-if="left.title||left.imageUrl" v-slot:left>
				<view class="left-content">
					<view class="left-text" :style="'color:' + titleColor" v-if="left.title">{{ left.title }}</view>
					<view hover-class="u-hover-class" @click="handleClickLeft" class="left-button-view">
						<view v-if="left.imageUrl" class="left-button"
							:style="{ backgroundColor: left.backgroundColor }">
							<image :src="left.imageUrl" mode="widthFix" :style="{ width: left.width }" class="left-image"></image>
						</view>
						<view class="right-text" :style="'color:' + titleColor" v-if="left.rightTitle">
							{{ left.rightTitle }}
						</view>
					</view>
				</view>
			</template>
			<template v-slot:right v-if="right.length">
				<view class="right-content">
					<view v-for="(item, index) in right" :style="item.style" class="right-button" :key="index">
						<view @click="handleClickRight(index)" hover-class="u-hover-class">
							<view v-if="item.red" class="red-dot"></view>
							<image :src="item.imageUrl" mode="widthFix" class="right-image"
								:style="item.style || { backgroundColor: item.backgroundColor }"></image>
						</view>
					</view>
				</view>
			</template>

		</up-navbar>
	</view>
</template>

<script>
	export default {
		props: {
			// 导航栏标题
			title: {
				type: String,
				default: ''
			},
			titleColor: {
				type: String,
				default: '#191C27'
			},
			bgColor: {
				type: String,
				default: "transparent"
			},
			customStyle: {
				type: Object,
				default () {
					return {
						background: 'transparent'
					};
				}
			},
			leftIcon: {
				type: String,
				default: 'arrow-left'
			},
			// 返回箭头的颜色
			leftIconColor: {
				type: String,
				default: '#333333'
			},
			// 是否固定在顶部
			fixed: {
				type: Boolean,
				default: true
			},
			// 是否显示导航栏的下边框
			borderBottom: {
				type: Boolean,
				default: false
			},
			isBack: {
				type: [Boolean, String],
				default: false
			},
			// 自定义返回逻辑
			customBack: {
				type: Function,
				default: () => {
					// #ifdef APP-PLUS
					if (getCurrentPages().length == 1) {
						uni.switchTab({
							url: '/pages/index/index'
						});
					} else {
						uni.navigateBack();
					}
					// #endif
					// #ifdef MP ||H5
					if (getCurrentPages().length == 1) {
							uni.switchTab({
								url: '/pages/index/index'
							});
						} else {
							uni.navigateBack();
						}
					// #endif
				}
			},
			right: {
				type: Array,
				default () {
					return [{
						title: '',
						imageUrl: '',
						path: ''
					}];
				}
			},
			left: {
				type: Object,
				default () {
					return {
						title: '',
						imageUrl: ''
					};
				}
			}
		},
		data() {
			return {};
		},
		computed: {},
		created() {},
		methods: {
			handleClickLeft() {
				console.log('click left');
				this.$emit('leftClick');
			},
			handleClickRight(index) {
				console.log('click right:', index);
				this.$emit('rightClick', index);
			},
			goBack() {
				console.log("goBack")
				// 如果自定义了点击返回按钮的函数，则执行，否则执行返回逻辑
				if (typeof this.customBack === 'function') {
					// 在微信，支付宝等环境(H5正常)，会导致父组件定义的customBack()函数体中的this变成子组件的this
					// 通过bind()方法，绑定父组件的this，让this.customBack()的this为父组件的上下文
					this.customBack.bind(uni.$u.$parent.call(uni))();
				} else {
					uni.navigateBack();
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.navbar-custom {
		.left-content {
			min-width: 120rpx;
			display: flex;
			align-content: center;

			.left-text {
				display: flex;
				align-items: center;
				font-weight: bold;
				font-size: 32rpx;
				color: #191c27;
				max-width: 280rpx;
				white-space: nowrap;
				padding-right: 44rpx;
				text-overflow: ellipsis;
				overflow: hidden;
				margin-right: 32rpx;
			}

			.left-button-view {
				display: flex;
				align-items: center;

				.left-button {
					width: 64rpx;
					// height: 64rpx;
					border-radius: 24rpx;
					display: flex;
					align-content: center;

					.left-image {
						width: 64rpx;
						height: 64rpx;
						// border-radius: 24rpx;
					}
				}

				.right-text {
					display: flex;
					align-content: center;
					align-items: center;
					margin-left: 16rpx;
					color: #333;
					font-size: 28rpx;
				}
			}
		}

		.right-content {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			// #ifdef APP-PLUS
			margin-right: 24rpx;
			// #endif
			// #ifdef MP
			margin-right: 168rpx;
			
			// #endif

			.right-button {
				width: 64rpx;
				// height: 64rpx;
				margin-right: 16rpx;
				position: relative;

				.red-dot {
					position: absolute;
					right: 8rpx;
					top: -4rpx;
					border-radius: 8rpx;
					width: 16rpx;
					height: 16rpx;
					background-color: #e54b46;
				}

				.right-image {
					width: 64rpx;
					height: 64rpx;
					// border-radius: 24rpx;
				}
			}
		}
	}
</style>